<template>
    <div class="custom_image">
        <el-image v-if="srcUrl" :src="srcUrl" class="w-full cursor-pointer">
        </el-image>
        <el-icon v-else size="30"><Picture /></el-icon>
    </div>
</template>

<script setup>
import { Picture } from "@element-plus/icons-vue";
const props = defineProps({
    srcUrl: {
        type: String,
        default: "",
    },
});
</script>

<style lang="scss" scoped>
.custom_image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
    .el-image {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
